<template>
  <div id="map">
    <!-- 地图 -->
    <el-amap class="amap-box" :zoomEnable="false" :dragEnable="false" :zoom="amap.zoom" :center="amap.center">
      <!-- 当前位置图标 -->
      <el-amap-marker :position="amap.markers.position" :extData="amap.markers" :title="amap.markers.text">
        <div :style="`background-color: ${pageData.onlineStatus == '1' ? 'red' : 'gray'}`" class="coordSvg">
        </div>
      </el-amap-marker>
      <!-- 位置名称显示 -->
      <el-amap-text class="map-text" :text="amap.markers.text" :offset="amap.markers.offset"
        :position="amap.markers.position" />
    </el-amap>
  </div>
</template>
<script>
export default {
  props: ['pageData'],
  name: "Map",
  data() {
    const vm = this;
    return {
      iconImg:
        "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
      // 地图对象
      amap: {
        zoom: 14,
        center: [vm.pageData.longitude, vm.pageData.latitude],
        markers:
        {
          position: [vm.pageData.longitude, vm.pageData.latitude],
          text: vm.pageData.address,
          offset: [0, 40],
        }
      },
    };
  },
  created() {
    console.log('this.pageData.totalAddress: ', this.pageData);
  },
};
</script>
<style lang="scss" scoped>
::v-deep .amap-icon img {
  max-width: 2rem !important;
  max-height: 2rem !important;
}

::v-deep .amap-logo {
  display: none;
  opacity: 0 !important;
}

::v-deep .amap-copyright {
  opacity: 0;
}

#map {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #c0c4cc;
}

.amap-box {
  height: 300px;
  //   height: 44vh;
  //   height: calc(100vh - 45px);
}

::v-deep .amap-overlay-text-container {
  white-space: normal
}

// ::v-deep .amap-labels {
//   cursor: pointer;
// }
// ::v-deep .amap-markers {
//   pointer-events: none;
// }
.el-vue-search-box-container {
  // top: 45px;
  width: 100% !important;
}

.search-box {
  position: absolute;
  z-index: 5;
  width: 70%;
  left: 13%;
  top: 10px;
  height: 30px;
}

.search-box .el-input {
  float: left;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 0 7px 7px 0;
  outline: none;
  position: relative;
}

.search-box .el-button {
  position: absolute;
  right: 0;
  top: 1px;
  width: 20%;
  background: #38a28a;
  border-radius: 0 7px 7px 0;
  border: none;
  color: #fff;
  outline: none;
}

.coordSvg {
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 26px;
  color: #fff;
  pointer-events: none;
  -webkit-mask: url('../../assets/images/coord.svg') no-repeat 50% 50%;
  mask: url('../../assets/images/coord.svg') no-repeat 50% 50%;
}

.tip-box {
  text-align: center;
  width: 100%;
  position: absolute;
  top: 35px;
  padding: 10px 0;
  background-color: #fff;
  opacity: 0.8;
}
</style>